<script setup lang="ts">
const props = defineProps<{
  imgSrc: string
}>()

const loading = ref(true)
const newImg = new Image()
newImg.src = props.imgSrc
newImg.onload = () => {
  loading.value = false
}
</script>

<template>
  <div>
    <div mxa h-18 w-18 sm:w-40 sm:h-40>
      <el-skeleton :loading="loading" animated>
        <template #template>
          <el-skeleton-item variant="image" h-18 w-18 sm:w-40 sm:h-40 />
        </template>
        <template #default>
          <img
            :src="imgSrc" h-18 w-18 sm:w-40 sm:h-40
          >
        </template>
      </el-skeleton>
    </div>
  </div>
</template>
